<template>
	<view class="storeMessage">
		
		<view>
			<scroll-view :style="{ marginTop: styles.marginTop + 'px', marginBottom: styles.marginBottom + 'px',marginLeft:styles.marginLR+'px',marginRight:styles.marginLR+'px' }" class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
				<view v-for="i in 6" id="demo1" class="scroll-view-item_H">
					<view class="header">
						<view><image style="width: 190upx;height: 200upx;margin: 0 auto;" src="../../static/images/common/naicha.png" mode="scaleToFill"></image></view>
						<view>旗航店</view>
						<view>进店逛逛</view>
					</view>
				</view>
				
			</scroll-view>
		</view>

	</view>
</template>
<script>
export default {
	name: 'storeMessage',
	data() {
		return {
			
			old: {
				scrollTop: 0
			}
		};
	},
	methods: {
		scroll: function(e) {
			console.log(e)
			this.old.scrollTop = e.detail.scrollTop
		},
		goTop: function(e) {
			// 解决view层不同步的问题
			this.scrollTop = this.old.scrollTop
			this.$nextTick(function() {
				this.scrollTop = 0
			});
			uni.showToast({
				icon:"none",
				title:"纵向滚动 scrollTop 值已被修改为 0"
			})
		}
	},
	props: ['styles']
};
</script>
<style lang="scss" scoped>
.storeMessage {
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	.scroll-view-item {
		text-align: center;
		font-size: 28upx;
	}
	
	.scroll-view-item_H {
		display: inline-block;
		width: 33%;
		text-align: center;
		font-size: 28upx;
	}
	.header{
		// width: 150upx;
	    background: #FFFFFF;
		padding: 20upx;
		margin-right: 20upx;
		overflow: hidden;
		&>view:nth-child(2){
			margin: 10px 0;
			text-align: center;
			
		}
		&>view:nth-child(3){
			border: 1upx solid red;
			width: 140upx;
			margin: 0 auto;
			border: 1upx solid red;
			    padding: 5upx 10upx;
			    color: red;
			    font-size: 24upx;
			    border-radius: 10upx;
				text-align: center;
		}
	}
}
</style>
